<!--
 * @Author: Hunter
 * @Date: 2022-02-28 16:46:35
 * @LastEditTime: 2022-05-01 20:05:34
 * @LastEditors: Hunter
 * @Description: 
 * @FilePath: \book_mark\src\components\bookmark-item\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div v-if="info.name" class="info">
    <div class="info-name">
      <el-avatar :src="info.icon" size="small">
        <el-avatar :icon="PictureRounded" size="small"></el-avatar>
      </el-avatar>
      <span>{{ info.name }}</span>
    </div>
    <div class="info-href">
      <span
        ><el-link :href="info.href">{{ info.href }}</el-link></span
      >
      <span
        ><el-link type="primary" :href="info.href" target="_blank"
          >在新页面打开</el-link
        ></span
      >
    </div>
    <div class="info-pic">
      <el-image :src="infoPic">
        <template #error>
          <div class="image-slot">
            <el-icon><PictureRounded /></el-icon>
          </div>
        </template>
      </el-image>
    </div>
  </div>
  <el-empty v-else description="暂无数据"></el-empty>
</template>

<script lang='ts'>
import { PictureRounded } from "@element-plus/icons-vue";
import { serverConfig } from "@/config";
import { computed } from "vue";
const size = {
  width: 600,
  height: 400,
};
export default {
  props: ["info"],
  setup(props) {
    const infoPic = computed(() => {
      return (
        serverConfig.InfoPicServer +
        props.info.href +
        `?w=${size.width}&h=${size.height}`
      );
    });
    return {
      infoPic,
      PictureRounded,
    };
  },
};
</script>

<style scoped>
.info {
  display: flex;
  flex-direction: column;
}
.info > div {
  margin-top: 20px;
  display: flex;
  padding-left: 20px;
}
.info-name > span,
.info-href > span,
.info-view,
.info-pic {
  margin-left: 20px;
}
</style>